<template>
  <div id="app">
    <countTo
      :startVal="startVal"
      :endVal="endVal"
      :duration="3000"
      :autoplay="autoFlag"
      :useEasing="true"
    ></countTo>
    <CountCom></CountCom>
    <button @click="incrementEvent">点击按钮</button>
  </div>
</template>
<script>
import countTo from "vue-count-to";
import CountCom from "./components/count";
export default {
  components: {
    countTo,
    CountCom,
  },
  data() {
    return {
      startVal: 100,
      endVal: 10,
      autoFlag: false,
      timer: null,
    };
  },
  watch: {
    endVal(v) {
      console.log(v, "vvvv------vvv");
    },
  },
  methods: {
    incrementEvent() {
      this.autoFlag = true;
      this.endVal = 0;
      console.log("this.autoFlag:", this.autoFlag);
      this.timer = setTimeout(() => {
        this.autoFlag = true;
        this.startVal = 0;
        this.endVal = 70;
      }, 2500);
    },
  },
  destroyed() {
    clearTimeout(this.timer);
  },
};
</script>

<style>
</style>
